<template>
    <div class="slider-wrapper">
        <div v-show="isOpen" class="slider-content">
            <slot/>
        </div>
        <div :class="{'show-slider': !isOpen}" class="slider-toggle" @click="toggleSlider">
            <div v-if="isOpen" class="hide-icon">
                <i class="iconfont icon-angledoubleleft"/>
            </div>
            <div v-else class="show-icon">
                <i class="iconfont icon-angledoubleright"/>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        isOpen: {
            type: Boolean,
            default: true
        }
    },
    methods: {
        toggleSlider() {
            this.$emit('toggleSlider', this.isOpen)
        }
    }
}
</script>
<style lang="scss">
// 侧边栏
.slider-wrapper {
    transition: all 0.28s;
    z-index: 1001;
    width: 100%;
    height: 100%;
    border-left: 1px solid rgba(0,0,0,.2);
    // position: fixed;
    // left: 0;
    background: #fff;
    .slider-content{
        height: 100%;
        .left-tab{
            height: 100%;
            .el-tabs__content{
                height: calc(100% - 50px);
            }
        }
    }
    .slider-toggle{
        position: absolute;
        right: 0;
        top: 40%;
        &.show-slider{
            // right: -16px;
        }
    }
}
</style>

